<template>
  <el-form ref="form" :model="form" label-width="160px">
    <el-row>
      <el-col :span="10">
        <el-form-item label="联系人">
          <el-input v-model="form.customer.name" :disabled="true"/>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="联系方式">
          <el-input v-model="form.customer.phone"/>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="车牌号">
          <el-input v-model="form.customer.carNum"/>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="选择服务">
          <el-checkbox-group v-model="checkcategory">
            <el-checkbox v-for="(cate,id) in categorys" :label="cate.id" :key="id">
              {{ cate.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="10">
        <el-form-item label="问题描述">
          <el-input v-model="form.descrip"/>
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="预约时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="date1" style="width: 100%;"/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="date2" style="width: 100%;"/>
          </el-col>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="18">
        <el-form-item label="详细地址">
          <baidu-map>
            <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 9999}">
              <div>
                <el-input type="text" style="width: 70%" v-model="searchAddress" auto-complete="off"
                          placeholder="请输入还车地址，用于维修完成后为用户提供还车服务"/>
                <el-button type="primary" icon="el-icon-location-outline" @click="selectLocation">地图选址</el-button>
              </div>
            </bm-auto-complete>
          </baidu-map>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8">
        <el-form-item label="还车服务">
          <el-checkbox-group :max="max" v-model="checkTurn" @change="handleChange">
            <el-checkbox v-for="isReturn in turnCars" :label="isReturn" :key="isReturn"> {{ isReturn }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
    </el-form-item>


    <map-component ref="MapComponent" @getData="getChildrenData"/>
  </el-form>
</template>
<script>

import MapComponent from "./component/MapComponent";

export default {
  name: 'OrderReserve',
  components: {MapComponent},
  data() {
    return {
      form: {
        orderId: new Date().getTime(),
        reserveDate: '',
        date: this.handleTime(new Date()),
        descrip: '',
        isReturn: '',
        createBy: this.$store.state.user.id,
        status: 1, // 已录入
        updateBy: '',
        updateTime: '',
        customer: {
          name: '',
          phone: '',
          address: '',
          carNum: '',
        },
        category: '',
      },
      /*预约时间*/
      date1: '',
      date2: '',
      /*选中类型*/
      checkcategory: [],
      categorys: [],
      keyword: "",
      searchAddress: '',
      /*还车*/
      max: 1,
      checkTurn: [],
      turnCars: ["是", "否"],
    }
  },
  methods: {
    onSubmit() {
      var data = Object.assign({}, this.form)
      data.category = this.handleCategory()
      data.customer.address = this.searchAddress
      this.date1 = this.date1.getFullYear() + '-' + (this.date1.getMonth() + 1) + '-' + this.date1.getDate();
      this.date2 = this.date2.getHours() + ':' + this.date2.getMinutes() + ':' + this.date2.getSeconds()
      data.reserveDate = this.date1 + ' ' + this.date2

      this.$axios.post("/orders/add_update", data)
        .then(resp => {
          if (resp.data.code === 200) {
            this.$message({
              message: resp.data.result,
              type: "success"
            })
          }
          this.formClean()
        })
    },
    getCategory() {
      this.$axios.get("/orders/categoryList").then(resp => {
        if (resp.status === 200) {
          this.categorys = resp.data.result
        }
      })
    },
    selectLocation() {
      this.$refs.MapComponent.showMap = true
    },
    getChildrenData(data) {
      this.searchAddress = data
    },
    /*打开地图*/
    openMap(i, r) {
      this.selectAdrressConfirm()
      this.end = r.customer.address
    },
    /*获取地址*/
    selectAdrressConfirm() {
      this.end = this.keyword
    },
    /*类型*/
    handleCategory() {
      var temp = []
      for (let key = 0; key < this.checkcategory.length; key++) {
        for (let j = 0; j < this.categorys.length; j++) {
          if (this.checkcategory[key] === this.categorys[j].id) {
            temp.push(this.categorys[j])
          }
        }
      }
      // data.category = temp
      return temp
    },
    /*还车*/
    handleChange(value) {
      let temp
      for (let valueKey in value) {
        temp = value[valueKey]
      }
      if (temp === "是") {
        this.form.isReturn = 1
      }
      if (temp === "否") {
        this.form.isReturn = 0
      }
    },
    /*事件处理*/
    handleTime(date) {
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      return year + "-" + month + "-" + day + ' ' + hour + ":" + minute + ":" + second
    },
    /*清空表单*/
    formClean() {
      this.form = {
        orderId: new Date().getTime(),
        reserveDate: '',
        date: this.handleTime(new Date()),
        descrip: '',
        isReturn: '',
        createBy: '',
        status: 1, // 已录入
        updateBy: '',
        updateTime: '',
        customer: {
          name: '',
          phone: '',
          address: '',
          carNum: '',
        },
        category: '',
      }
      this.searchAddress = ''
      this.date1 = ''
      this.date2 = ''
      this.checkTurn = ''
      this.checkcategory = []
      this.categorys = []
    },
    /*处理订单基本信息*/
    handleUser() {
      var data = this.$store.state.user
      this.form.customer.name = data.realName
      this.form.customer.phone = data.phone
    }
  },
  mounted() {
    this.getCategory()
    this.handleUser()
  }
}
</script>
